<%@ Page Language="C#" AutoEventWireup="true" Inherits="Documentation_CRUD_Styles" Codebehind="Styles.aspx.cs" %>

<%@ Register Assembly="Pampa.WebControls" Namespace="Pampa.WebControls" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="../../Css/Layout.css" rel="stylesheet" type="text/css"/>       
    <link href="../../Css/ComboList.css" rel="stylesheet" type="text/css"/>               
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <span class="title">Styles</span>
    <br />
    <br />
    Each element in Pampa.Net has a well defined style structure giving the possibility to change any aspect of the GUIs generated by the Framework. 
    For example, suppose I wanted to change the style of a ComboList. Firstly, I should change the property CssClass 
    of the control (by default CssClass of a ComboList is "comboListDefault") setting the name of my new class, let's say "comboNewClass".
    Then, I need to duplicate all the structure of the ComboList style (we can find the default style <a href="Pampa.WebControls/ComboList.css">here</a>) and changing whatever I want.<br/><br/>
    Also, for controls with images (like ComboList itself) we could change the property PathImages setting the path where we putted new images for the control.<br/><br/>
    In order to discover what style is applying to certain object and to be able to change any aspect of this style I recommend to use <A href="http://getfirebug.com/">FireBug</A>
    <br />
    <br />
    <br />
        
    <span class="subtitle">Structure of ComboList Style</span>
    <br />
    <br />
    .comboNewClass .unselectedItem <span class="comment"> // style of an unselected item </span><br />
    .comboNewClass .selectedItem <span class="comment"> // style of a selected item </span><br />
    .comboNewClass .list <span class="comment"> // style of the item's list </span><br />
    .comboNewClass .scroll <span class="comment"> // style of the scroll </span><br />
    .comboNewClass .value <span class="comment"> // style of the container were it is the value of the control </span><br />
    .comboNewClass .valueOnFocus <span class="comment"> // style of the container when the control has the focus </span><br />
    .comboNewClass .disabled <span class="comment"> // style of the control when the control is disanbled </span><br />
    .comboNewClass .input <span class="comment"> // style of the input for editable combos (it is just the style of the value text in non editable combos) </span><br />
    .comboNewClass .inputOnFocus <span class="comment"> // style of the input when the control has the focus </span><br />
    .comboNewClass .inputDisabled <span class="comment"> // style of the input when the control is disanbled </span><br />
    <br />
    <br />
    <br />
        
    <span class="subtitle">New Combo Using a New Style</span>
    <br />
    <br />
    I defined comboNewClass in <a href="../../Css/ComboList.css">..Css/ComboList.css</a> <br /><br />
    <cc1:ComboList ID="ComboList1" runat="server" CssClass="comboNewStyle"/>
    <br />
    <br />
    <br />
                
    <span class="subtitle">Default Styles for all Controls in the Framework</span>
    <br/>
    <br/>
    
    <span class="subsubtitle">WebControls</span>
    <br />
    <br />
    <a href="../../Resources/Pampa.WebControls/Button.css">Button</a><br/>
    <a href="../../Resources/Pampa.WebControls/Calendar.css">Calendar</a><br/>
    <a href="../../Resources/Pampa.WebControls/CheckList.css">CheckList</a><br/>
    <a href="../../Resources/Pampa.WebControls/CollapsablePanel.css">CollapsablePanel</a><br/>
    <a href="../../Resources/Pampa.WebControls/ComboList.css">ComboList</a><br/>
    <a href="../../Resources/Pampa.WebControls/DatePicker.css">DatePicker</a><br/>
    <a href="../../Resources/Pampa.WebControls/DatePickerCombos.css">DatePickerCombos</a><br/>
    <a href="../../Resources/Pampa.WebControls/FloatingWindow.css">FloatingWindow</a><br/>
    <a href="../../Resources/Pampa.WebControls/MonthCalendar.css">MonthCalendar</a><br/>
    <a href="../../Resources/Pampa.WebControls/Selector.css">Selector</a><br/>
    <a href="../../Resources/Pampa.WebControls/Validator.css">Validator</a><br/>
    <a href="../../Resources/Pampa.WebControls/VerticalMenu.css">VerticalMenu</a><br/>
    <br />
    <br />

    <span class="subsubtitle">CRUD</span>
    <br />
    <br />
    <a href="../../Resources/Pampa.WebControls/EditableDetails.css">EditableDetails</a><br/>
    <a href="../../Resources/Pampa.WebControls/EditableHeader.css">EditableHeader</a><br/>
    <a href="../../Resources/Pampa.WebControls/EntityEdit.css">EntityEdit</a><br/>
    <a href="../../Resources/Pampa.WebControls/EntityView.css">EntityView</a><br/>
    <br />
    <br />
    
    <span class="subsubtitle">Grid</span>
    <br />
    <br />
    <a href="../../Resources/Pampa.WebControls/ColumnManager.css">ColumnManager</a><br/>
    <a href="../../Resources/Pampa.WebControls/ConfigManager.css">ConfigManager</a><br/>
    <a href="../../Resources/Pampa.WebControls/ContextMenu.css">ContextMenu</a><br/>
    <a href="../../Resources/Pampa.WebControls/CustomGrid.css">CustomGrid</a><br/>
    <a href="../../Resources/Pampa.WebControls/FilterManager.css">FilterManager</a><br/>
    <a href="../../Resources/Pampa.WebControls/Pager.css">Pager</a><br/>
    <a href="../../Resources/Pampa.WebControls/QuickFiltersPanel.css">QuickFiltersPanel</a><br/>
    <br />
    <br />
        
    </div>
    </form>
</body>
</html>
